﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta><style>/*<![CDATA[*/

table{border: 1px solid gray;}
td{border: 1px dotted gray;}
p{margin: 3px 0 3px 0; padding: 0;}
#ID_Footer{font-size: small; font-style: italic; text-align: right; margin-top: 4em; padding-top: 4px; border-top: 2px solid gray;}

/*]]>*/</style><title>第10章 css简介</title></head><body>
<div><br /></div>
<div style="text-align: center"><span style="font-family: 宋体; font-size: 30pt; padding-left: 77pt; line-height: 280%">第</span><span style="font-family: Calibri; font-size: 30pt; padding-left: 77pt; line-height: 280%">10</span><span style="font-family: 宋体; font-size: 30pt; padding-left: 77pt; line-height: 280%">章 &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: Calibri; font-size: 30pt; padding-left: 77pt; line-height: 280%">css</span><span style="font-family: 宋体; font-size: 30pt; padding-left: 77pt; line-height: 280%">简介</span></div>
<div><span style="font-family: 微软雅黑; font-size: 16pt; padding-left: 18pt; line-height: 240%">1. &nbsp; &nbsp; &nbsp; &nbsp;概念</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">看不见的盒子</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%"> (218)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%">CSS</span><span style="font-family: 宋体; font-size: 12pt; line-height: 240%">作用，样式</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%"> (p219)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; line-height: 240%">选择器，选择多个元素？</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%">(p220)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; line-height: 240%">声明格式，分隔符</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%"> (p220)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; line-height: 240%">属性，值，分隔符</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%"> (p220)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; line-height: 240%">内部</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%">/</span><span style="font-family: 宋体; font-size: 12pt; line-height: 240%">外部样式表，</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%">style</span><span style="font-family: 宋体; font-size: 12pt; line-height: 240%">特性</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%"> (p225)</span></div>
<div><br /></div>
<div><span style="font-family: 微软雅黑; font-size: 16pt; font-weight: bold; padding-left: 18pt; line-height: 240%">2. &nbsp; &nbsp; &nbsp; &nbsp;标签</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">&lt;</span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 160%">link /</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">&gt; (</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">位于头部，指明</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">CSS</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">文件位置，</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">p223)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c45911; line-height: 160%">href</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">特性，指明</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">CSS</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">文件</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c45911; line-height: 160%">type</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">特性，特性值</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">&quot;</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 160%">text/css</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">&quot;</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c45911; line-height: 240%">rel</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">特性，特性值</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">&quot;</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 240%">stylesheet</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">&quot; (p224)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; line-height: 190%">HTML4</span><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; line-height: 190%">和</span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; line-height: 190%">XHTML</span><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; line-height: 190%">中标签的</span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; text-decoration: underline; color: #c00000; line-height: 190%">style</span><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; color: #000000; line-height: 190%">特性</span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #000000; line-height: 190%"> (p225)</span></div>
<div><span style="font-family: Times New Roman; font-size: 10pt; padding-left: 21pt; line-height: 240%"> &nbsp; &nbsp; &nbsp; &nbsp;&lt;</span><span style="font-family: Times New Roman; font-size: 10pt; color: #7030a0; padding-left: 21pt; line-height: 240%">p </span><span style="font-family: Times New Roman; font-size: 10pt; text-decoration: underline; color: #c00000; padding-left: 21pt; line-height: 240%">style</span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 21pt; line-height: 240%">=&quot;color:red;&quot;&gt; ... &lt;/</span><span style="font-family: Times New Roman; font-size: 10pt; color: #7030a0; padding-left: 21pt; line-height: 240%">p</span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 21pt; line-height: 240%">&gt;</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; line-height: 190%">内部</span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; line-height: 190%">CSS (</span><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; line-height: 190%">位于头部，</span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; line-height: 190%">p225)</span></div>
<div><span style="font-family: Times New Roman; font-size: 10pt; padding-left: 10pt; line-height: 190%"> &nbsp; &nbsp; &nbsp; &nbsp;&lt;</span><span style="font-family: Times New Roman; font-size: 10pt; color: #7030a0; padding-left: 10pt; line-height: 190%">style </span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">type=&quot;</span><span style="font-family: Times New Roman; font-size: 10pt; color: #c00000; padding-left: 10pt; line-height: 190%">text/css</span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">&quot;&gt;</span></div>
<div><span style="font-family: Times New Roman; font-size: 10pt; padding-left: 10pt; line-height: 190%"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;...</span></div>
<div><span style="font-family: Times New Roman; font-size: 10pt; padding-left: 10pt; line-height: 240%"> &nbsp; &nbsp; &nbsp; &nbsp;&lt;/</span><span style="font-family: Times New Roman; font-size: 10pt; color: #7030a0; padding-left: 10pt; line-height: 240%">style</span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 240%">&gt;</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; line-height: 190%">CSS</span><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; line-height: 190%">选择器（</span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; line-height: 190%">p227</span><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; line-height: 190%">）</span></div>
<div><span style="font-family: Times New Roman; font-size: 10pt; padding-left: 10pt; line-height: 190%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 宋体; font-size: 10pt; padding-left: 10pt; line-height: 190%">通用选择器</span><span style="font-family: Times New Roman; font-size: 10pt; padding-left: 10pt; line-height: 190%">: </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; padding-left: 10pt; line-height: 190%">*{}</span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">, </span><span style="font-family: 宋体; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">页面所有元素</span></div>
<div><span style="font-family: Times New Roman; font-size: 10pt; padding-left: 10pt; line-height: 190%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 宋体; font-size: 10pt; padding-left: 10pt; line-height: 190%">类型选择器</span><span style="font-family: Times New Roman; font-size: 10pt; padding-left: 10pt; line-height: 190%">: </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; padding-left: 10pt; line-height: 190%">h1, h2, h3 {}</span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">, </span><span style="font-family: 宋体; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">匹配选择的元素</span></div>
<div><span style="font-family: Times New Roman; font-size: 10pt; padding-left: 10pt; line-height: 190%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 宋体; font-size: 10pt; padding-left: 10pt; line-height: 190%">类选择器：</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; padding-left: 10pt; line-height: 190%">.note{}</span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">, </span><span style="font-family: 宋体; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">匹配</span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">class</span><span style="font-family: 宋体; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">特性值等于句点</span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">(.)</span><span style="font-family: 宋体; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">后面部分的元素。与类型结合</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; padding-left: 10pt; line-height: 190%">h1.note{}</span></div>
<div><span style="font-family: Times New Roman; font-size: 10pt; padding-left: 10pt; line-height: 190%"> &nbsp; &nbsp; &nbsp; &nbsp;ID</span><span style="font-family: 宋体; font-size: 10pt; padding-left: 10pt; line-height: 190%">选择器：</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; padding-left: 10pt; line-height: 190%">#introduction {}</span></div>
<div><span style="font-family: Times New Roman; font-size: 10pt; padding-left: 10pt; line-height: 190%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 宋体; font-size: 10pt; padding-left: 10pt; line-height: 190%">子元素选择器：</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; padding-left: 10pt; line-height: 190%">li&gt;a{}</span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">, </span><span style="font-family: 宋体; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">只匹配父元素为</span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">li</span><span style="font-family: 宋体; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">的</span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">a</span><span style="font-family: 宋体; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">（直接子元素）</span></div>
<div><span style="font-family: Times New Roman; font-size: 10pt; padding-left: 10pt; line-height: 190%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 宋体; font-size: 10pt; padding-left: 10pt; line-height: 190%">后代选择器：</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; padding-left: 10pt; line-height: 190%">p a{}</span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">, </span><span style="font-family: 宋体; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">匹配</span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">p</span><span style="font-family: 宋体; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">元素下的</span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">a</span><span style="font-family: 宋体; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">元素</span></div>
<div><span style="font-family: Times New Roman; font-size: 10pt; padding-left: 10pt; line-height: 190%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 宋体; font-size: 10pt; padding-left: 10pt; line-height: 190%">相邻兄弟选择器：</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; padding-left: 10pt; line-height: 190%">h1+p{}</span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">, </span><span style="font-family: 宋体; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">匹配</span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">h1</span><span style="font-family: 宋体; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">之后的相邻兄弟</span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">p</span><span style="font-family: 宋体; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 190%">元素</span></div>
<div><span style="font-family: Times New Roman; font-size: 10pt; padding-left: 10pt; line-height: 240%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 宋体; font-size: 10pt; padding-left: 10pt; line-height: 240%">普通兄弟选择器：</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; padding-left: 10pt; line-height: 240%">h1~p{}</span><span style="font-family: 宋体; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 240%">，匹配</span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 240%">h1</span><span style="font-family: 宋体; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 240%">的兄弟</span><span style="font-family: Times New Roman; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 240%">p</span><span style="font-family: 宋体; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 240%">元素</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; line-height: 190%">选择器优先级</span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; line-height: 190%"> (p228)</span></div>
<div><span style="font-family: Times New Roman; font-size: 10pt; padding-left: 10pt; line-height: 190%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 宋体; font-size: 10pt; padding-left: 10pt; line-height: 190%">就近原则，即后出现的优先</span></div>
<div><span style="font-family: Times New Roman; font-size: 10pt; padding-left: 10pt; line-height: 190%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 宋体; font-size: 10pt; padding-left: 10pt; line-height: 190%">具体性原则，即选择器更具体的优先</span></div>
<div><span style="font-family: Times New Roman; font-size: 10pt; padding-left: 10pt; line-height: 240%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 宋体; font-size: 10pt; padding-left: 10pt; line-height: 240%">属性值后加</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; padding-left: 10pt; line-height: 240%">!important</span><span style="font-family: 宋体; font-size: 10pt; color: #000000; padding-left: 10pt; line-height: 240%">，说明此规则更重要</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; line-height: 190%">属性的继承</span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; line-height: 190%"> (p229)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 190%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 宋体; font-size: 12pt; line-height: 190%">大多数属性都会被子元素继承</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 190%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 190%">background-color</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 190%">border</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">属性不会被继承</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 190%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: 宋体; font-size: 12pt; line-height: 190%">属性值设为</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 190%">inherit</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">，强制继承</span></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div><script type="text/javascript" language="javascript" src="jquery.js"></script><script type="text/javascript" language="javascript" src="itemlink.js"></script></body></html>